Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/building simple send #16868

Merged
merged 10 commits into from
Dec 24, 2024
Merged

Feat/building simple send #16868

merged 10 commits into from
Dec 24, 2024

Conversation

Khushboo-dev-cpp
Copy link
Contributor

@Khushboo-dev-cpp Khushboo-dev-cpp commented Dec 4, 2024

fixes #16836

What does the PR do

This PR add some dummy components + some actual ones in order to fix a mechanism for the dialog sizing.

Please not even though the AccountSelector, TokenSelector and NetworkFilter are added in this PR they are not worked on completely yet and is still something that is WIP under Epic #16696

Please note this PR doesn't cover QML Units tests, I will work on them next.
The Recipient selector is only temporary one and not done yet TBD under #16916

Affected areas

SimpleSend.qml

Architecture compliance

Screenshot of functionality (including design for comparison)

  • I've checked the design and this PR matches it
Screen.Recording.2024-12-04.at.7.14.49.PM.mov
Screen.Recording.2024-12-04.at.7.19.35.PM.mov
Screen.Recording.2024-12-08.at.11.21.18.PM.mov

@status-im-auto
Copy link
Member

status-im-auto commented Dec 4, 2024

Jenkins Builds

Click to see older builds (92)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ d350cfb #2 2024-12-04 17:12:39 ~9 min tests/nim 📄log
✔️ d350cfb #2 2024-12-04 17:13:08 ~9 min macos/aarch64 🍎dmg
d350cfb #2 2024-12-04 17:17:00 ~13 min tests/ui 📄log
✔️ d350cfb #2 2024-12-04 17:19:37 ~16 min linux-nix/x86_64 📦tgz
✔️ d350cfb #2 2024-12-04 17:21:00 ~17 min macos/x86_64 🍎dmg
✔️ d350cfb #2 2024-12-04 17:21:45 ~18 min linux/x86_64 📦tgz
✔️ 7ccfcc1 #4 2024-12-04 17:33:30 ~8 min macos/aarch64 🍎dmg
✔️ 7ccfcc1 #4 2024-12-04 17:35:04 ~9 min tests/nim 📄log
✔️ 7ccfcc1 #4 2024-12-04 17:37:49 ~12 min macos/x86_64 🍎dmg
✔️ 7ccfcc1 #4 2024-12-04 17:42:55 ~17 min tests/ui 📄log
✔️ 7ccfcc1 #4 2024-12-04 17:46:17 ~20 min linux/x86_64 📦tgz
✔️ 7ccfcc1 #4 2024-12-04 17:46:56 ~21 min linux-nix/x86_64 📦tgz
✔️ 7ccfcc1 #4 2024-12-04 17:59:22 ~33 min windows/x86_64 💿exe
✔️ 59b4155 #5 2024-12-04 18:21:44 ~7 min macos/aarch64 🍎dmg
✔️ 9f2a213 #6 2024-12-04 18:27:34 ~5 min macos/aarch64 🍎dmg
✔️ 9f2a213 #6 2024-12-04 18:30:56 ~8 min tests/nim 📄log
✔️ 51fc469 #7 2024-12-04 18:39:28 ~6 min macos/aarch64 🍎dmg
✔️ 51fc469 #7 2024-12-04 18:44:56 ~11 min tests/nim 📄log
✔️ 51fc469 #7 2024-12-04 18:46:40 ~13 min macos/x86_64 🍎dmg
✔️ 51fc469 #7 2024-12-04 18:47:21 ~14 min linux-nix/x86_64 📦tgz
✔️ 51fc469 #7 2024-12-04 18:48:39 ~15 min tests/ui 📄log
✔️ 51fc469 #7 2024-12-04 18:54:51 ~21 min linux/x86_64 📦tgz
✔️ 51fc469 #7 2024-12-04 19:01:10 ~27 min windows/x86_64 💿exe
✔️ 2a789a7 #9 2024-12-04 20:45:24 ~6 min macos/aarch64 🍎dmg
✔️ 2a789a7 #9 2024-12-04 20:47:11 ~7 min tests/nim 📄log
✔️ 2a789a7 #9 2024-12-04 20:52:01 ~12 min tests/ui 📄log
✔️ 2a789a7 #9 2024-12-04 20:53:08 ~13 min linux-nix/x86_64 📦tgz
✔️ 2a789a7 #9 2024-12-04 20:54:06 ~14 min macos/x86_64 🍎dmg
✔️ 2a789a7 #9 2024-12-04 20:55:49 ~16 min linux/x86_64 📦tgz
✔️ 2a789a7 #9 2024-12-04 21:04:30 ~25 min windows/x86_64 💿exe
✔️ 93224cb #10 2024-12-05 09:58:50 ~6 min macos/aarch64 🍎dmg
✔️ 93224cb #10 2024-12-05 10:00:47 ~8 min tests/nim 📄log
✔️ 93224cb #10 2024-12-05 10:04:35 ~11 min tests/ui 📄log
✔️ 93224cb #10 2024-12-05 10:06:29 ~13 min macos/x86_64 🍎dmg
✔️ 93224cb #10 2024-12-05 10:09:40 ~17 min linux-nix/x86_64 📦tgz
✔️ 93224cb #10 2024-12-05 10:15:02 ~22 min linux/x86_64 📦tgz
✔️ 93224cb #10 2024-12-05 10:20:23 ~27 min windows/x86_64 💿exe
✔️ 153f94b #11 2024-12-05 21:47:03 ~7 min macos/aarch64 🍎dmg
✔️ 153f94b #11 2024-12-05 21:48:22 ~9 min tests/nim 📄log
153f94b #11 2024-12-05 21:48:56 ~9 min tests/ui 📄log
✔️ 153f94b #11 2024-12-05 21:52:52 ~13 min macos/x86_64 🍎dmg
✔️ 153f94b #11 2024-12-05 21:53:09 ~14 min linux-nix/x86_64 📦tgz
✔️ 153f94b #11 2024-12-05 21:59:02 ~19 min linux/x86_64 📦tgz
✔️ 153f94b #11 2024-12-05 22:11:04 ~31 min windows/x86_64 💿exe
✔️ 153f94b #12 2024-12-06 08:49:59 ~12 min tests/ui 📄log
✔️ 56dffde #12 2024-12-08 22:35:23 ~5 min macos/aarch64 🍎dmg
✔️ 56dffde #12 2024-12-08 22:36:43 ~7 min tests/nim 📄log
56dffde #13 2024-12-08 22:40:39 ~11 min tests/ui 📄log
✔️ 56dffde #12 2024-12-08 22:43:15 ~13 min linux-nix/x86_64 📦tgz
✔️ 56dffde #12 2024-12-08 22:43:35 ~14 min macos/x86_64 🍎dmg
✔️ 56dffde #12 2024-12-08 22:51:49 ~22 min linux/x86_64 📦tgz
✔️ 56dffde #12 2024-12-08 22:56:59 ~27 min windows/x86_64 💿exe
✔️ 017cf6c #13 2024-12-09 10:23:45 ~7 min tests/nim 📄log
✔️ 017cf6c #13 2024-12-09 10:24:22 ~7 min macos/aarch64 🍎dmg
✔️ 98aeb7e #14 2024-12-09 10:33:26 ~7 min macos/aarch64 🍎dmg
✔️ 98aeb7e #14 2024-12-09 10:33:45 ~7 min tests/nim 📄log
✔️ 98aeb7e #15 2024-12-09 10:38:12 ~11 min tests/ui 📄log
✔️ 16e67a2 #15 2024-12-09 10:47:13 ~6 min macos/aarch64 🍎dmg
✔️ 16e67a2 #15 2024-12-09 10:48:07 ~7 min tests/nim 📄log
✔️ 16e67a2 #16 2024-12-09 10:52:11 ~11 min tests/ui 📄log
✔️ 16e67a2 #15 2024-12-09 10:54:53 ~13 min linux-nix/x86_64 📦tgz
✔️ 16e67a2 #15 2024-12-09 10:55:29 ~14 min macos/x86_64 🍎dmg
✔️ 16e67a2 #15 2024-12-09 11:01:57 ~21 min linux/x86_64 📦tgz
✔️ 16e67a2 #15 2024-12-09 11:05:36 ~24 min windows/x86_64 💿exe
✔️ 0272273 #16 2024-12-10 08:30:13 ~6 min macos/aarch64 🍎dmg
✔️ 0272273 #16 2024-12-10 08:31:39 ~7 min tests/nim 📄log
✔️ 0272273 #17 2024-12-10 08:35:37 ~11 min tests/ui 📄log
✔️ 0272273 #16 2024-12-10 08:38:04 ~14 min macos/x86_64 🍎dmg
✔️ 0272273 #16 2024-12-10 08:40:54 ~17 min linux-nix/x86_64 📦tgz
✔️ 0272273 #16 2024-12-10 08:46:20 ~22 min linux/x86_64 📦tgz
✔️ 0272273 #16 2024-12-10 08:50:00 ~26 min windows/x86_64 💿exe
✔️ 8c89690 #17 2024-12-16 09:06:05 ~5 min macos/aarch64 🍎dmg
✔️ 8c89690 #17 2024-12-16 09:07:41 ~7 min tests/nim 📄log
✔️ 8c89690 #18 2024-12-16 09:12:19 ~11 min tests/ui 📄log
✔️ 8c89690 #17 2024-12-16 09:16:52 ~16 min macos/x86_64 🍎dmg
✔️ 8c89690 #17 2024-12-16 09:21:12 ~20 min linux-nix/x86_64 📦tgz
✔️ 8c89690 #17 2024-12-16 09:22:42 ~22 min linux/x86_64 📦tgz
✔️ 8c89690 #17 2024-12-16 09:29:40 ~29 min windows/x86_64 💿exe
✔️ e0a6422 #18 2024-12-19 13:29:47 ~4 min macos/aarch64 🍎dmg
✔️ e0a6422 #18 2024-12-19 13:33:00 ~7 min tests/nim 📄log
✔️ e0a6422 #19 2024-12-19 13:37:27 ~12 min tests/ui 📄log
✔️ e0a6422 #18 2024-12-19 13:39:40 ~14 min macos/x86_64 🍎dmg
✔️ e0a6422 #18 2024-12-19 13:40:05 ~14 min linux-nix/x86_64 📦tgz
✔️ e0a6422 #18 2024-12-19 13:47:26 ~22 min linux/x86_64 📦tgz
✔️ e0a6422 #18 2024-12-19 13:52:36 ~27 min windows/x86_64 💿exe
✔️ 1259e60 #19 2024-12-20 14:22:58 ~5 min macos/aarch64 🍎dmg
✔️ 1259e60 #19 2024-12-20 14:24:38 ~7 min tests/nim 📄log
1259e60 #20 2024-12-20 14:30:08 ~12 min tests/ui 📄log
✔️ 1259e60 #19 2024-12-20 14:32:14 ~14 min macos/x86_64 🍎dmg
✔️ 1259e60 #19 2024-12-20 14:33:51 ~16 min linux-nix/x86_64 📦tgz
✔️ 1259e60 #19 2024-12-20 14:38:14 ~20 min linux/x86_64 📦tgz
✔️ 1259e60 #19 2024-12-20 14:45:29 ~28 min windows/x86_64 💿exe
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ b6919a3 #20 2024-12-20 15:28:31 ~7 min tests/nim 📄log
✔️ b6919a3 #20 2024-12-20 15:29:42 ~8 min macos/aarch64 🍎dmg
✔️ b6919a3 #22 2024-12-20 15:33:28 ~12 min tests/ui 📄log
✔️ b6919a3 #20 2024-12-20 15:38:11 ~16 min linux-nix/x86_64 📦tgz
✔️ b6919a3 #20 2024-12-20 15:39:37 ~18 min macos/x86_64 🍎dmg
✔️ b6919a3 #20 2024-12-20 15:41:29 ~20 min linux/x86_64 📦tgz
✔️ b6919a3 #20 2024-12-20 15:46:00 ~24 min windows/x86_64 💿exe
✔️ a40b6e6 #21 2024-12-24 05:50:23 ~4 min macos/aarch64 🍎dmg
✔️ a40b6e6 #21 2024-12-24 05:52:36 ~7 min tests/nim 📄log
✔️ a40b6e6 #23 2024-12-24 05:57:11 ~11 min tests/ui 📄log
✔️ a40b6e6 #21 2024-12-24 06:01:10 ~15 min macos/x86_64 🍎dmg
✔️ a40b6e6 #21 2024-12-24 06:03:00 ~17 min linux-nix/x86_64 📦tgz
✔️ a40b6e6 #21 2024-12-24 06:07:48 ~22 min linux/x86_64 📦tgz
✔️ a40b6e6 #21 2024-12-24 06:13:18 ~27 min windows/x86_64 💿exe

@Khushboo-dev-cpp Khushboo-dev-cpp force-pushed the feat/buildingSimpleSend branch 3 times, most recently from 59b4155 to 9f2a213 Compare December 4, 2024 18:21
@Khushboo-dev-cpp Khushboo-dev-cpp force-pushed the feat/UpdateLaunchSendModalMechanism branch from c52e770 to 89daa99 Compare December 4, 2024 18:26
Base automatically changed from feat/UpdateLaunchSendModalMechanism to master December 4, 2024 20:34
@Khushboo-dev-cpp Khushboo-dev-cpp force-pushed the feat/buildingSimpleSend branch 2 times, most recently from 2a789a7 to 93224cb Compare December 5, 2024 09:52
@Khushboo-dev-cpp Khushboo-dev-cpp marked this pull request as ready for review December 5, 2024 16:11
@Khushboo-dev-cpp Khushboo-dev-cpp requested review from Cuteivist and removed request for a team December 5, 2024 16:11
@Khushboo-dev-cpp Khushboo-dev-cpp force-pushed the feat/buildingSimpleSend branch 2 times, most recently from 56dffde to 017cf6c Compare December 9, 2024 10:16
@benjthayer
Copy link

benjthayer commented Dec 9, 2024

Hey @Khushboo-dev-cpp looks great! Just a couple of things I spotted:

  1. When the sticky header transitions in, is it possible for the asset icon/name and network selector to animate down so it feels like they are connected to the backing with shadow that transitions in? (as opposed to them being masked/revealed in their final Y position):
SendHeader.mp4
Screen.Recording.2024-12-10.at.9.24.52.AM.mov

I think it now works the way you mentioned @benjthayer ;)


  1. If possible, it would be good to avoid this interim state where the sticky header content is visible at the same time as the content it replaces. Perhaps just need to bring the sticky header in a little deeper in the scroll?
Screenshot 2024-12-09 at 10 22 23

Fixed, I bring in the sticky header after a bit of padding.

  1. I never checked if generally this was possible, but is it possible to add the opacity and blur to the footer and header backing so, as the user scrolls, some of the dialog content can be seen through them?

Example in the design:

Screenshot 2024-12-09 at 10 26 22 https://www.figma.com/design/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=25639-170189&t=1EBVs8JT8hv5TdnN-4

I cant see it in design, but I tried some playing with FastBlur and it looks like this

Screen.Recording.2024-12-09.at.10.45.24.PM.mov
  1. The skeleton loading bars are a little thin, their height is designed to match the cap-height of the text they replace
Screenshot 2024-12-09 at 10 10 37

Fixed
image

Example from Figma:
https://www.figma.com/design/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=25657-208573&t=1EBVs8JT8hv5TdnN-4
Screenshot 2024-12-09 at 10 11 54


  1. Something we added via Swap is that the Max button has the ticker of the asset included. This is just to make things more clear what denomination the user is specifying (crypto vs FIAT).

Done.
Screenshot 2024-12-10 at 9 30 59 AM

Screenshot 2024-12-09 at 10 14 28
  1. The amount entry field looks slightly indented compared to the rest of the dialog content. Also the fiat value underneath has a little more padding above it than the designs. In the design, the amount input, stroke and fiat value are grouped with more padding above and below this group than b
Screenshot 2024-12-09 at 10 27 27 etween the elements

https://www.figma.com/design/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=25192-32990&t=1EBVs8JT8hv5TdnN-4
Screenshot 2024-12-09 at 10 15 16

Improved now
Untitled


  1. The network menu overlaps the dropdown button slightly. There should be 4px separation between the button and menu flyout. The hover state for the button should also be Black 5% - this is a slight deviation from the design system to ensure the hover state shows up on the grey backing.
Screenshot 2024-12-09 at 10 17 01

Fixed
image


  1. When the user changes account to send from and there is an asset selected, they should see their balance of that asset on the currently selected network along with each account in the menu:

https://www.figma.com/design/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=25193-64791&t=1EBVs8JT8hv5TdnN-4
Screenshot 2024-12-09 at 10 20 46

Fixed in this task #16834


Copy link
Contributor

@alexjba alexjba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work! 👍

storybook/pages/SendModalFooterPage.qml Outdated Show resolved Hide resolved
ui/app/mainui/SendModalHandler.qml Outdated Show resolved Hide resolved
ui/app/mainui/SendModalHandler.qml Outdated Show resolved Hide resolved
Copy link
Contributor

@alexjba alexjba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Massive work! It's looking great!

Just some minor findings.

ui/app/AppLayouts/Wallet/controls/TokenSelector.qml Outdated Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we need the animation on fees change?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the fees change happens automatically from the go side and is instantaneous, in the design Ben had mentioned if instantaneous, loading state is not needed but I cannot find a link right now :(

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm referring to the new animation we have on swap and dapps. When the fee value changes, there is a nice animation where the text blinks a few times.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm Ive not seen this! @benjthayer should it be shown here and can you please point me to the design please?

Copy link
Contributor

@alexjba alexjba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work! 👍

Copy link
Member

@caybro caybro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Massive work :) overall looks good to me, some suggestions inline

ui/app/AppLayouts/Wallet/panels/SendModalHeader.qml Outdated Show resolved Hide resolved
ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml Outdated Show resolved Hide resolved
ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml Outdated Show resolved Hide resolved
ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml Outdated Show resolved Hide resolved
ui/app/AppLayouts/Wallet/views/SendModalFooter.qml Outdated Show resolved Hide resolved
ui/imports/shared/popups/send/views/AmountToSend.qml Outdated Show resolved Hide resolved
ui/imports/shared/popups/send/views/AmountToSend.qml Outdated Show resolved Hide resolved
Copy link
Member

@caybro caybro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM for now, pending TODOs will be done in followup PRs

@Khushboo-dev-cpp Khushboo-dev-cpp merged commit b5ba168 into master Dec 24, 2024
9 checks passed
@Khushboo-dev-cpp Khushboo-dev-cpp deleted the feat/buildingSimpleSend branch December 24, 2024 06:39
@caybro
Copy link
Member

caybro commented Jan 8, 2025

CC @Khushboo-dev-cpp @alexjba

Unfortunately this PR most likely caused this rather hard to catch regression (as hinted by this subtle console warning):

WRN 2025-01-08 19:19:47.322Z qt warning                                 topics="qt" tid=116898 text="TypeError: Cannot read property 'height' of null" file=qrc:/StatusQ/Popups/Dialog/StatusDialog.qml:37 category=default

image

Notice the dialog lost the the "aspect preview" combobox; compare to:

image

@Khushboo-dev-cpp
Copy link
Contributor Author

A

CC @Khushboo-dev-cpp @alexjba

Unfortunately this PR most likely caused this rather hard to catch regression (as hinted by this subtle console warning):

WRN 2025-01-08 19:19:47.322Z qt warning                                 topics="qt" tid=116898 text="TypeError: Cannot read property 'height' of null" file=qrc:/StatusQ/Popups/Dialog/StatusDialog.qml:37 category=default

image

Notice the dialog lost the the "aspect preview" combobox; compare to:

image

Aaah oh no. I can work on the fix or are you already on it @caybro ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dialog sizing
5 participants